上一篇提到 Vue2 是用 Object.defineProperty 來進行雙向綁定。
而 Vue3 則是升級成 ES6 的 Proxy ，相較起 Object.defineProperty 而言，性能上有了大大提升。

Proxy 的原意是代理。我們可以簡單理解成 :

我們可以透過 Proxy 對物件進行攔截，外界對物件的任何操作都要通過 Proxy，而 Proxy 也可以對外界的操作進行過濾與改寫。

Proxy 的操作方法多達 13 種，可以代理一整個物件，並且返回一個新的物件(所以不會修改到原物件)。

語法 : var proxy = new Proxy(target, handler);

Proxy 提供兩個參數，分別為 :

1. target(目標)：可以是陣列、物件或函式。
2. handler(操作) : target 的操作行為 ( 比如 get,set )
   由於 handler 的操作方法實在太多了，詳情可見這裡

以下來看兩個例子 :

1. 我們必須針對 Proxy 的實例進行操作，才能使 Proxy 起作用。

var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 35;
  }
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

2. 如果我們在 handler 沒有設置攔截的行為，那外界的操作就會直達原物件。

var target = {};
var handler = {}; // 因為 handler 是空物件，所以操作 Proxy = 操作原物件。
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"

那我們如何透過 Proxy 實現雙向綁定呢? 一樣是使用 get / set 方法 :

let target = {
  myName: 'Yin',
};
const proxy = new Proxy(target, {
  get: (target, key, receiver) => {
    console.log('get:',target, key, receiver)
    // 這裡的 key 是指物件的 key
    return target[key]; //所以 return 的是值
  },
  set: (target, prop, newValue, receiver) => {
    console.log('set:',target, key, newValue, receiver)
    target[prop] = value;
    return true
  },
});

至於實作的方法，請參考 Ray 助教這篇 淺談 Vue3 雙向綁定的概念與實作 這篇提到的實作方法 ~

參考文章 :
淺談 Vue3 雙向綁定的概念與實作
重新理解 Vue 的雙向綁定
[JS] JavaScript 代理（Proxy）